// 带动画的进度条
import QtQuick 2.15

Item {
    id: root
    
    property real value: 0
    property real minimum: 0
    property real maximum: 100
    property real progress: Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)))
    
    property color startColor: "#2B4AFF"
    property color endColor: "#FF42D5"
    property color backgroundColor: "#FFFFFF"
    property real backgroundOpacity: 0.2
    
    property real animationOffset: 0
    
    SequentialAnimation on animationOffset {
        running: true
        loops: Animation.Infinite
        NumberAnimation {
            from: 0
            to: 1
            duration: 2000
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            from: 1
            to: 0
            duration: 2000
            easing.type: Easing.InOutQuad
        }
    }
    
    Rectangle {
        id: background
        anchors.fill: parent
        radius: height / 2
        color: backgroundColor
        opacity: backgroundOpacity
    }
    
    Rectangle {
        id: progressBar
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width * progress
        radius: height / 2
        clip: true
        
        // 使用 Canvas 绘制水平渐变（从左到右）
        Canvas {
            anchors.fill: parent
            
            property real animOffset: root.animationOffset
            onAnimOffsetChanged: requestPaint();
            
            onPaint: {
                var ctx = getContext("2d");
                var radius = parent.height / 2;
                var width = parent.width;
                var height = parent.height;
                
                // 创建水平渐变（从左到右）
                var gradient = ctx.createLinearGradient(0, 0, width, 0);
                
                // 保持原有的动画逻辑：animationOffset 在 0-1 之间变化
                gradient.addColorStop(0, startColor);
                gradient.addColorStop(animationOffset, startColor);
                gradient.addColorStop(1, endColor);
                
                // 绘制圆角矩形
                ctx.beginPath();
                ctx.moveTo(radius, 0);
                ctx.lineTo(width - radius, 0);
                ctx.quadraticCurveTo(width, 0, width, radius);
                ctx.lineTo(width, height - radius);
                ctx.quadraticCurveTo(width, height, width - radius, height);
                ctx.lineTo(radius, height);
                ctx.quadraticCurveTo(0, height, 0, height - radius);
                ctx.lineTo(0, radius);
                ctx.quadraticCurveTo(0, 0, radius, 0);
                ctx.closePath();
                
                ctx.fillStyle = gradient;
                ctx.fill();
            }
            
            onWidthChanged: requestPaint();
            onHeightChanged: requestPaint();
        }
    }
}

